import { Form } from 'antd'
import { Button, InputItem } from 'antd-mobile'
import styles from './index.scss'
import TipModal from '../Modal'
const FormItem = Form.Item
const FormNewPassword = ({
  form: { getFieldDecorator, getFieldValue, validateFields },
  listData,
  next,
  content,
  modalControl,
  closeModal,
  showModal
}) => {
  // 定义modal需要的数据
  const modalData = {
    content,
    modalControl,
    closeModal
  }
  const showList = listData.map((item, index) => {
    if (item.children) {
      const validatePassword = (rule, value, callback) => {
        if (value && item.children.reg.test(value)) {
          console.log(value)
          validateFields([item.children.key], { force: true })
          callback()
        } else if (!item.children.reg.test(value)) {
          callback(`${item.errorContent}`)
        }
      }
      const confirmPassword = (rule, value, callback) => {
        if (value && value !== getFieldValue(item.key)) {
          callback(`两次密码输入的不同`)
        } else {
          callback()
        }
      }
      return (
        <div key={index}>
          <FormItem>
            {getFieldDecorator(item.key, {
              rules: [
                {
                  required: true,
                  message: `用户${item.value}不能为空`
                },
                {
                  validator: validatePassword
                }
              ]
            })(
              <InputItem placeholder={`请输入${item.value}`} type="password" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator(item.children.key, {
              rules: [
                {
                  required: true,
                  message: `请确认${item.value}`
                },
                {
                  validator: confirmPassword
                }
              ]
            })(
              <InputItem
                className={item.children.className}
                placeholder={`请确认${item.value}`}
                type="password"
              />
            )}
          </FormItem>
        </div>
      )
    } else {
      return (
        <div key={index}>
          <FormItem>
            {getFieldDecorator(item.key, {
              rules: [
                {
                  required: true,
                  message: `用户${item.value}不能为空`
                },
                {
                  pattern:item.reg
                }
              ]
            })(
              <InputItem
                className={item.className}
                placeholder={`请输入${item.value}`}
                type="password"
              />
            )}
          </FormItem>
        </div>
      )
    }
  })
  // 提交
  const submit = () => {
    validateFields((error, value) => {
      if (!error) {
        console.log(value)
        next()
      } else if (error[listData[0].key]) {
        console.log(listData[0].errorContent)
        showModal(listData[0].errorContent)
      } else if (error[listData[0].children.key]) {
        showModal(listData[0].children.errorContent)
      } else {
        console.log(error)
      }
    })
  }
  return (
    <Form className={styles.passwordContainer}>
      {showList}
      <FormItem>
        <Button type="primary" onClick={submit} className={styles.buttonSize}>
          下一步
        </Button>
      </FormItem>
      <TipModal {...modalData} />
    </Form>
  )
}

export default Form.create()(FormNewPassword)
